<template>
	<view class="content">
		<view class="shopDeil_top">
			<view class="shopDeil_top_li">
				<image mode="aspectFill" class="banner" :src="info.logo?info.logo:'../../../static/images/icon_04.png'"></image>
				<view class="ads_box">
					<text class="shopDeil_name">{{info.company_name}}</text>
					<text class="ads">{{info.company_address}}</text>
				</view>
			</view>
			<view class="shopDeil_top_li">
				<view class="ads_box">
					<text class="shopDeil_name">营业时间</text>
					<text class="ads">周{{info.business_start_week}}至周{{info.business_end_week}} {{info.business_start_time}} AM - {{info.business_end_time}} PM</text>
				</view>
			</view>
			<view class="shopDeil_top_li shopDeil_top_evaluation">
				<text class="shopDeil_name">累积评价（{{comment.total}}）</text>
				<view class="shopDeil_evaluation">
					<view class="shopDeil_evaluation_li" v-for="(item,index) in comment.data" :key="index">
						<view class="evaluation_li_name">
							<image mode="aspectFill" :src="item.user.nickname?item.user.nickname:'../../../static/images/icon_04.png'"></image>
							<text class="name">{{item.user.nickname?item.user.nickname:'未知'}}</text>
							<view class="date">{{item.create_time}}</view>
						</view>
						<view class="evaluation_li_content">{{item.content}}</view>
					</view>
					
					<view class="has_more_data" @click="get_detail_info" v-show="has_more_comment"> <image src="../../../static/images/icon/more.png"></image> 查看更多</view>
				</view>
			</view>
		</view>
		<view class="shopDeil_bottom">
			<button class="phone" @tap="dialPhone">拨号</button>
			<button @tap="mapTap"><image src="../../../static/images/icon_05.png"></image>导航</button>
		</view>
		<toast></toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			evaluation: [
				{
					name: '巴拉差价'
				},
				{
					name: '巴拉差价'
				},
				{
					name: '巴拉差价'
				}
			],
			id: '',
			info: '',
			comment:{
				data:[]
			},
			now_comment_page:1,
			has_more_comment:true
		};
	},
	methods: {
		// 拨号
		dialPhone() {
			uni.makePhoneCall({
				phoneNumber: this.info.phone+""
			});
		},
		// 获取详情数据
		get_detail_info() {
			this.$ajax.post({ url: '/Shop/shopDetail', data: { shop_id: this.id ,currentPage:this.now_comment_page} }).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.info = res.data.data;
					this.info.business_start_week = this.week_num_to_week_text(this.info.business_start_week)
					this.info.business_end_week = this.week_num_to_week_text(this.info.business_end_week)
					if(this.now_comment_page==1){
						this.comment = res.data.comment;
						if(res.data.comment.data.length<10){
							this.has_more_comment = false;
						}
					}else{
						if(res.data.comment.data.length>0){
							this.comment.data = this.comment.data.concat(res.data.comment.data);
						}else{
							this.has_more_comment = false;
							this.$alert("没有更多评论了")
						}
						
					}
					if(res.data.comment.data.length>0){
						
					}
					
					
					this.now_comment_page++;
				} else {
					this.$alert(res.msg);
				}
			});
		},
		// 星期数转文字数
		week_num_to_week_text(num) {
			num = parseFloat(num);
			switch (num) {
				case 1:
					return '一';
					break;
				case 2:
					return '二';
					break;
				case 3:
					return '三';
					break;
				case 4:
					return '四';
					break;
				case 5:
					return '五';
					break;
				case 6:
					return '六';
					break;
				case 7:
					return '日';
					break;
				default:
					return '未知';
					break;
			}
		},
		// 在地图查看位置
		mapTap() {
			uni.openLocation({
				latitude: parseFloat(this.info.latitude),
				longitude: parseFloat(this.info.longitude),
				success: function() {
					console.log('success');
				}
			});
		}
	},
	onLoad(opt) {
		this.id = opt.id;
		this.get_detail_info();
	}
};
</script>

<style>
.shopDeil_top {
	padding: 0 20upx 100upx;
	box-sizing: border-box;
}
.shopDeil_top_li {
	border-bottom: 1px solid #eee;
}
.has_more_data{
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	/* background-color: #ccc; */
	text-align: center;
}
.has_more_data image{
	width: 40upx;
	height: 40upx;
	vertical-align: middle;
	/* margin-top: 20upx; */
}
.evaluation_li_name .date{
	float: right;
	width: 300upx;
	font-size: 24upx;
	color: #888;
}
.shopDeil_top_li .banner {
	height: 320upx;
	width: 100%;
	border-radius: 20upx;
}
.shopDeil_name {
	color: #41434b;
	font-size: 34upx;
	font-weight: 600;
	display: block;
	line-height: 70upx;
	padding-top: 20upx;
}
.ads_box .ads {
	font-size: 28upx;
	color: #a4a8b4;
	display: block;
}
.ads_box {
	padding: 0 20upx 30upx;
	box-sizing: border-box;
}
.evaluation_li_name image {
	height: 60upx;
	width: 60upx;
	border-radius: 50%;
}
.shopDeil_evaluation_li {
	border-bottom: 1px solid #eee;
	padding: 20upx 20upx 10upx;
	box-sizing: border-box;
}
.evaluation_li_name {
	font-size: 24upx;
	color: #a4a8b4;
	display: flex;
	align-items: center;
	padding-bottom: 10upx;
}
.evaluation_li_name .name {
	padding: 0 20upx;
	color: #353535;
	width: 440upx;
}
.evaluation_li_content {
	color: #a4a8b4;
	font-size: 24upx;
	line-height: 40upx;
}
.shopDeil_bottom {
	display: flex;
	justify-content: flex-end;
	position: fixed;
	bottom: 0;
	padding: 20rpx 0;
	background: #fff;
	width: 100%;
}
.shopDeil_bottom button {
	margin: 0 20upx;
	font-size: 30upx;
	padding: 0 25upx;
	height: 60upx;
	line-height: 60upx;
	border-radius: 50upx;
	background: #ff5d76;
	color: #fff;
	display: flex;
	align-items: center;
}
.shopDeil_bottom image {
	height: 45upx;
	justify-content: flex-end;
	width: 45upx;
	margin-right: 10upx;
}
.shopDeil_bottom .phone {
	border: 1px solid #a4a8b4;
	background: #fff;
	color: #a4a8b4;
}
.shopDeil_top_evaluation {
	border-bottom: none;
}
</style>
